<template>
  <div class="exam-detail">
    <a-card class="detail-card">
      <div class="exam-detail-header">
        <h2>{{ examDetail.title }}</h2>
        <div class="exam-time">
          <span>开始时间：<span class="highlight-value">{{ examDetail.startTime }}</span></span>
          <span>结束时间：<span class="highlight-value">{{ examDetail.endTime }}</span></span>
        </div>
      </div>
    </a-card>

    <a-card title="考试概述" class="detail-card">
      <a-descriptions :column="3">
        <a-descriptions-item label="考试时长">
          <span class="highlight-value">{{ examDetail.duration }}</span>分钟
        </a-descriptions-item>
        <a-descriptions-item label="考试总分">
          <span class="highlight-value">{{ examDetail.totalScore }}</span>分
        </a-descriptions-item>
        <a-descriptions-item label="及格分数">
          <span class="highlight-value">{{ examDetail.passScore }}</span>分
        </a-descriptions-item>
        <a-descriptions-item label="试题总数">
          <span class="highlight-value">{{ examDetail.questionCount }}</span>题
        </a-descriptions-item>
        <a-descriptions-item label="限考次数">
          <span class="highlight-value">{{ examDetail.attemptLimit }}</span>次
        </a-descriptions-item>
        <a-descriptions-item label="已考次数">
          <span class="highlight-value">{{ examDetail.attemptCount }}</span>次
        </a-descriptions-item>
        <a-descriptions-item label="开放权限">
          <span class="highlight-value">{{ examDetail.accessType }}</span>
        </a-descriptions-item>
        <a-descriptions-item label="试卷名称">
          <span class="highlight-value">{{ examDetail.paperName }}</span>
        </a-descriptions-item>
        <a-descriptions-item label="组卷方式">
          <span class="highlight-value">{{ examDetail.paperType }}</span>
        </a-descriptions-item>
      </a-descriptions>
    </a-card>

    <a-card title="考试须知" class="detail-card">
      <div class="exam-notice">
        <div class="question-types-row">
          <ul class="question-types">
            <li v-for="(count, type) in examDetail.questionTypes" :key="type">
              {{ type }}: {{ count }}题
            </li> 
          </ul>
        </div>
        <div class="exam-rules">
          <ul>
            <li v-for="(rule, index) in examDetail.rules" :key="index">
              {{ rule }}
            </li>
          </ul>
        </div>
      </div>
    </a-card>

    <div class="action-buttons">
      <a-button 
        v-if="examDetail.status === 'processing'"
        type="primary" 
        :disabled="!canTakeExam"
        @click="startExam"
      >
        开始考试
      </a-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, computed } from 'vue'
import { useRoute, useRouter } from 'vue-router'

const route = useRoute()
const router = useRouter()

// 模拟考试详情数据
const examDetail = ref({
  title: '信息安全考试',
  startTime: '2024-03-15 15:00:00',
  endTime: '2024-03-15 17:00:00',
  status: 'processing',
  duration: 120,
  totalScore: 100,
  passScore: 60,
  questionCount: 50,
  attemptLimit: 1,
  attemptCount: 0,
  accessType: '完全公开',
  paperName: '信息安全期末考试',
  paperType: '固定试卷',
  questionTypes: {
    '单选题': 20,
    '多选题': 15,
    '判断题': 15
  },
  rules: [
    '请在规定时间内完成考试，超时将自动提交',
    '考试过程中禁止切换窗口，违规将自动交卷',
    '请确保网络环境稳定，避免影响考试'
  ]
})

// 计算是否可以开始考试
const canTakeExam = computed(() => {
  return examDetail.value.status === 'processing'
})

// 获取考试详情
const fetchExamDetail = async () => {
  const examId = route.params.id
  // TODO: 调用API获取考试详情
  console.log('获取考试ID:', examId)
}

// 开始考试
const startExam = () => {
  router.push(`/exam/${route.params.id}/take`)
}

onMounted(() => {
  fetchExamDetail()
})
</script>

<style lang="scss" scoped>
.exam-detail {
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px;

  .exam-detail-header {
    h2 {
      margin-bottom: 16px;
      margin-top: 0;
      font-weight: 600;
    }

    .exam-time {
      color: #666;
      
      span {
        margin-right: 24px;
      }

      .highlight-value {
        color: #1890ff;  // 使用与考试概述相同的突出颜色
        font-weight: 500;
      }
    }
  }

  .detail-card {
    margin-bottom: 24px;
  }

  .exam-notice {
    .question-types-row {
      display: flex;
      align-items: center;
      margin-bottom: 16px;
      
      .label {
        font-weight: 500;
        margin-right: 8px;
      }

      .question-types {
        list-style: none;
        padding-left: 0;
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin: 0;
        
        li {
          background: #f5f5f5;
          padding: 8px 12px;
          border-radius: 4px;
        }
      }
    }

    .exam-rules {
      ul {
        list-style: none;
        padding-left: 0;
        margin: 0;
        
        li {
          margin-bottom: 8px;
          
          &:last-child {
            margin-bottom: 0;
          }
        }
      }
    }
  }

  .action-buttons {
    margin-top: 32px;
    text-align: center;
  }

  .highlight-value {
    color: #1890ff;
    font-weight: 500;
    margin-right: 4px;
  }
}
</style> 